<template>
  <div class="all_activity">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <div
        v-for="item in list"
        :key="item.id"
        class="card_box"
        @click="ToDetail(item)"
      >
        <img class="left_image" :src="item.previewPath" />
        <div
          style="display:flex; align-items:center; justify-content: space-between;flex:1"
        >
          <div class="right_box">
            <div class="title_box">
              <div class="first_title">
                <div class="title">{{ item.actTitle }}</div>
                <div
                  class="status"
                  :style="{ background: statusColor(item.timeStatus) }"
                >
                  {{ item.timeStatus | timeStr }}
                </div>
              </div>
            </div>
            <div class="activity_time">活动时间: {{ item.activityTime }}</div>
            <div class="activity_time">报名状态: {{ statusStr(item) }}</div>
          </div>
          <img
            v-if="item.status === 'S'"
            class="forward"
            src="../../../assets/img/forward.png"
          />
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { qryBankActByStoreNo, cardApply } from "@/api/agent";
export default {
  inject: ["query"],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  mounted() {
    this.getList();
  },
  filters: {
    timeStr(num) {
      let mapSource = {
        0: "未开始",
        1: "进行中",
        2: "已结束",
      };
      return mapSource[num];
    },
  },
  computed: {
    statusColor() {
      return (num) => {
        let mapSource = {
          0: "#FF9E5D",
          1: "#66CD99",
          2: "#D9D8D8",
        };
        return mapSource[num];
      };
    },
    statusStr() {
      return (item) => {
        const { status, cardApplyStatus } = item;
        let mapSource = {
          O: "报名中",
          S: "报名成功",
          F: "报名失败",
          N: {
            W: "报名中 ，开卡申请中请耐心等候。",
            Q: "报名中 ，请进行预约激活，如 已预约请耐心等候。",
            J: "报名中, 请修改结算信息",
            F: "报名失败",
          },
        };
        return typeof mapSource[status || "N"] === "string"
          ? mapSource[status]
          : mapSource[status || "N"][cardApplyStatus];
      };
    },
  },
  methods: {
    //预约申请
    cardApply({ actId, deptId }) {
      const { shopId: storeId } = this.$route.query;
      cardApply({ actId, storeId, urlType: "A", deptId }).then((res) => {
        if (!res.data?.data?.bankApplyUrl)
          return this.$notify({ type: "primary", message: res.data.msg });
        window.location.href = res.data.data.bankApplyUrl;
      });
    },
    getList() {
      // console.log(this.query);
      const { storeNo, merchantNo } = this.query;
      let query = {};
      if (storeNo) {
        query = { storeNo };
      } else {
        query = { storeNo:merchantNo };
      }
      qryBankActByStoreNo({ ...query }).then((res) => {
        let { data } = res.data;
        data.forEach((item) => {
          const { actStatus, putStatus } = item;
          let nowTime = new Date().getTime();
          let start = new Date(item.actStartTime.replace(/-/g, "/"));
          let end = new Date(item.actEndTime.replace(/-/g, "/"));
          let startTime = start.getTime();
          let endTime = end.getTime();
          let startStr = `${start.getFullYear()}-${start.getMonth() +
            1}-${start.getDate()}`;
          let endStr = `${end.getFullYear()}-${end.getMonth() +
            1}-${end.getDate()}`;
          let mergeStr = startStr + " 至 " + endStr;
          item.activityTime = mergeStr;
          let timeStatus =
            startTime > nowTime
              ? 0
              : startTime < nowTime && endTime > nowTime && putStatus === "Y"
              ? 1
              : 2;
          item.timeStatus = timeStatus;
        });
        this.list = data;
        this.finished = true;
      });
    },
    ToDetail(item) {
      localStorage.setItem("activeIndex", 1);
      const {
        id: actJrnId,
        actTitle,
        actStartTime,
        actEndTime,
        status,
        cardApplyStatus,
        deptId,
        actId,
      } = item;
      const { userId, type } = this.query;
      if (["F"].includes(status))
        return this.$notify({ type: "primary", message: "报名失败" });
      if (["", "N"].includes(status)) {
        switch (cardApplyStatus) {
          case "W":
            this.$notify({ type: "primary", message: "报名中，请耐心等待" });
            break;
          case "Q":
            this.cardApply({ actId, deptId });
            break;
          case "J":
            this.$router.push({
              name: "settleinfo",
              query: { type, id: userId, deptId, isBack: 1 },
            });
            break;
        }
        return;
      }
      this.$router.push({
        name: "myApplyDetail",
        query: { actJrnId, actTitle, actStartTime, actEndTime },
      });
    },
    // onLoad() {
    //   // 异步更新数据
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }
    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 500);
    // },
  },
};
</script>

<style lang="less" scoped>
.all_activity {
  background-color: rgb(248, 245, 245);
  padding: 26px 32px 0;
  .card_box {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 30px 24px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .left_image {
      width: 110px;
      height: 110px;
      border-radius: 8px;
      margin-right: 23px;
    }
    .right_box {
      .title_box {
        .first_title {
          display: flex;
          align-items: center;
          .title {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #131313;
            max-width: 350px;
            white-space: nowrap;
            overflow: hidden; //文本超出隐藏
            text-overflow: ellipsis; //文本超出省略号替代
            margin-right: 14px;
          }
          .status {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            width: 90px;
            height: 34px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            // padding: 0px 8px;
            background: #66cd99;
            border-radius: 8px;
          }
        }
      }
      .activity_time {
        margin-top: 20px;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        opacity: 0.7;
      }
    }
    .forward {
      margin-left: 10px;
      width: 20px;
    }
  }
}
</style>
